<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动页面</title>
    <link rel="stylesheet" href="./css/index.css?v=1.4">
    <link rel="stylesheet" href="./css/common.css">
</head>
<body>
    <div class="activity-info">
        <!-- 顶部倒计时 -->
        <div class="fixed-top">
            <div class="container-top">
                购物补贴券 &nbsp; <span class="fixed-top-money">200</span>
                &nbsp元
                <div class="fixed-top-fmu-countdown-unit">0</div>:
                <div class="fixed-top-fmu-countdown-unit">0</div>:
                <div class="fixed-top-fmu-countdown-unit">0</div>&nbsp;:
                <div class="fixed-top-fmu-countdown-unit fixed-top-mock-num">0</div>
                &nbsp;后失效！
            </div>
            <nav class="nav-wrapper fixed-top-nav">
              <ul class="list-tab-box2 list-tab-fixed">
                  <li data-type="0" class="active">
                      <a href="javascript:void(0);" data-type="0" class="list-tab">热销榜单</a>
                  </li>
                  <li data-type="1">
                      <a href="javascript:void(0);" data-type="1" class="list-tab">居家</a>
                  </li>
                  <li data-type="2">
                      <a href="javascript:void(0);" data-type="2" class="list-tab">美食</a>
                  </li>
                  <li data-type="3">
                      <a href="javascript:void(0);" data-type="3" class="list-tab">母婴</a>
                  </li>
                  <li data-type="4">
                      <a href="javascript:void(0);" data-type="4" class="list-tab">美妆</a>
                  </li>
                  <li data-type="5">
                      <a href="javascript:void(0);" data-type="5" class="list-tab">数码</a>
                  </li>
                  <li data-type="6">
                      <a href="javascript:void(0);" data-type="6" class="list-tab">服装</a>
                  </li>
              </ul>
          </nav>
        </div>
        <!-- banner区域倒计时 -->
        <div class="banner">
            <span class="banner-rule">规则</span>
            <div class="banner-title">
                购物补贴券
                <div class="banner-money">
                    <div class="scroll-num">
                        <div>0</div>
                        <div>1</div>
                        <div>2</div>
                        <div>3</div>
                        <div>4</div>
                        <div>5</div>
                        <div>6</div>
                        <div>7</div>
                        <div>8</div>
                        <div>9</div>
                    </div>
                </div>
                <div class="banner-money">0</div>
                <div class="banner-money">0</div> 元
            </div>
            <div class="banner-tips-text">
                下单立减 限时优惠
            </div>
            <div class="countdown-wrap">
                <div class="countdown-inner">
                    <div class="fmu-countdown-unit">0</div>:
                    <div class="fmu-countdown-unit">0</div>:
                    <div class="fmu-countdown-unit">0</div>:
                    <div class="fmu-countdown-unit">
                        <div class="mock—num">0</div>
                    </div>
                    <span class="name">后失效</span>
                </div>
            </div>
        </div>
    </div>

    <nav class="nav-wrapper">
        <ul class="list-tab-box2 nav-adsorption">
            <li data-type="0" class="active">
                <a href="javascript:void(0);" data-type="0" class="list-tab">热销榜单</a>
            </li>
            <li data-type="1">
                <a href="javascript:void(0);" data-type="1" class="list-tab">居家</a>
            </li>
            <li data-type="2">
                <a href="javascript:void(0);" data-type="2" class="list-tab">美食</a>
            </li>
            <li data-type="3">
                <a href="javascript:void(0);" data-type="3" class="list-tab">母婴</a>
            </li>
            <li data-type="4">
                <a href="javascript:void(0);" data-type="4" class="list-tab">美妆</a>
            </li>
            <li data-type="5">
                <a href="javascript:void(0);" data-type="5" class="list-tab">数码</a>
            </li>
            <li data-type="6">
                <a href="javascript:void(0);" data-type="6" class="list-tab">服装</a>
            </li>
        </ul>
    </nav>


    <!-- 规则弹窗 -->
    <div class="rule-dialog">
        <div class="rule-dialog-content">
            <div class="rule-dialog-title">活动规则</div>
            <p class="rule-dialog-text">使用说明：</p>
            <p class="rule-dialog-text">1. 补贴券为组合券形式，以优惠券形式发放；</p>
            <p class="rule-dialog-text">2. 补贴券仅限在本页面购买部分实物商品使用； </p>
            <p class="rule-dialog-text">3. 补贴券仅可用于抵扣商品货款金额（不包括税费以及运费）；</p>
            <p class="rule-dialog-text">4. 单张补贴券限用于单件商品的付款；</p>
            <p class="rule-dialog-text">5. 单张补贴券不可叠加使用；</p>
            <p class="rule-dialog-text">6. 补贴券不得提现、折现，不得转赠他人，不得为他人付款；</p>
            <p class="rule-dialog-text">7. 每个商品限用1个补贴券，在提交订单进行付款时，系统会自动核销购物券；</p>
            <p class="rule-dialog-text">8. 补贴券由返利网发放，如有问题请联系客服4006725100。</p>
            <div class="m-act-del rule-dialog-del"></div>
        </div>
    </div>
    <!-- 优惠券弹窗 -->
    <div class="coupon-dialog">
        <div class="coupon-dialog-content">
            <div class="coupon-text">
              已成功兑换
              <div>
                <span style="font-size: .3rem;color: #f10c10;">¥</span>
                <span id="data-coupon" style="font-size:.5rem;color: #f10c10;position: relative;left: -3px;">200</span>
              </div>
              优惠
            </div>
            <div class="coupon-result">  </div>
            <div class="open-btn" data-content="￥zYDlXt4ic1z￥">打开淘宝APP可领</div>
            <div class="coupon-tips">限今日有效</div>
          <div class="m-act-del coupon-dialog-del"></div>
        </div>
    </div>
    <!-- 优惠券弹窗 -->
    <div class="subsidy-dialog">
        <div class="subsidy-content">
            <div class="subsidy-decorate"></div>
            <div class="subsidy-info">
                <p class="subsidy-info-title">获得购物补贴</p>
                <h3 class="subsidy-info-money">
                    <span>200</span>
                    元
                </h3>
            </div>
            <div class="subsidy-countdown">
                <div class="subsidy-countdown-content">
                    <div class="subsidyfmu-countdown-unit">0</div>:
                    <div class="subsidyfmu-countdown-unit">0</div>:
                    <div class="subsidyfmu-countdown-unit">0</div>&nbsp;:
                    <div class="subsidyfmu-countdown-unit subsidymock-num">0</div>
                    &nbsp;
                    <span style="font-weight: 400;">后失效！</span>    
                </div>
                <div class="receive">
                    开心收下
                </div>
            </div>
            <div class="close-subsidy"></div>
        </div>
    </div>
    <!-- 商品分页 -->
    <div class="goods-wrap" id="goods-wrap"></div>
    <!-- 返回顶部 -->
    <div class="backToTop">
        <img src="./images/topBack.png" alt="">
    </div>
</body>
<!-- 可删除 -->
<script src="./js/zepto.min.js"></script>
<script src="./js/utils/index.js"></script>
<!-- <script src="./js/index.js" ></script> -->

<!-- rem适配方案 -->
<script>
    let laodJsList = [ "./js/index.js", "./js/utils/index.js" ]
    laodJsList.forEach( url => {
        url += `?v=` + Date.parse(new Date());
        loadJS(url);
    });

    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if (clientWidth >= 750) {
                    docEl.style.fontSize = '100px';
                } else {
                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                }
                var html = document.getElementsByTagName('html')[0];
                var settedFs = settingFs = parseInt(100 * (clientWidth / 750));
                var whileCount = 0;
                while (true) {
                    var realFs = parseInt(window.getComputedStyle(html).fontSize);
                    var delta = realFs - settedFs;
                    //不相等
                    if (Math.abs(delta) >= 1) {
                        if (delta > 0)
                            settingFs--;
                        else
                            settingFs++;
                        html.setAttribute('style', 'font-size:' + settingFs + 'px!important');
                    } else
                        break;
                    if (whileCount++ > 100)
                        break
                }
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
   //  function openDebug() {
   //  var head = document.getElementsByTagName("head")[0];
   //  var script = document.createElement("script");
   //  script.type = "text/javascript";
   //  script.onload = script.onreadystatechange = function () {
   //      if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
   //          var vConsole = new VConsole();
   //      }
   //  };
   //  var protocol = location.protocol;
   //  if (protocol === "file:") {
   //      protocol = "http:";
   //  }
   //  script.src = protocol + "//cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js";
   //  head.appendChild(script);
   // }
// openDebug()
</script>
</html>
